<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态添加Pre标签演示</title>
  <style>
    /* 页面整体样式 */
    body {
      font-family: 'Microsoft YaHei', Arial, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      margin: 0;
      padding: 20px;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 主容器样式 */
    .container {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      max-width: 600px;
      width: 100%;
    }

    /* 标题样式 */
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 30px;
      font-size: 24px;
    }

    /* pre标签容器样式 */
    .pre-container {
      background: #f8f9fa;
      border: 2px solid #e9ecef;
      border-radius: 10px;
      padding: 20px;
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
      margin-bottom: 20px;
    }

    /* 动态添加的pre标签样式 */
    .dynamic-pre {
      background: #fff;
      border: 1px solid #dee2e6;
      border-radius: 5px;
      padding: 15px;
      margin: 10px 0;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      color: #495057;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      animation: fadeInUp 0.5s ease-out;
      white-space: pre-wrap;
    }

    /* 淡入动画 */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 无限循环提示样式 */
    .loop-indicator {
      text-align: center;
      margin-top: 20px;
      font-size: 14px;
      color: #666;
      font-style: italic;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>动态Pre标签演示</h1>

    <!-- pre标签容器 -->
    <div class="pre-container" id="preContainer">
      <!-- 动态添加的pre标签将在这里显示 -->
    </div>

    <!-- 无限循环提示 -->
    <div class="loop-indicator">✨ 无限循环中... ✨</div>
  </div>

  <script>
    // 预定义的内容数组
    const preContents = [
      "这是我一生中最勇敢的瞬间",
      "揉成碎片",
      "拿捏"
    ];

    // 获取DOM元素
    const preContainer = document.getElementById('preContainer');

    // 全局变量
    let currentIndex = 0; // 当前要添加的内容索引
    let intervalId = null; // 定时器ID

    /**
     * 清空容器中的所有内容
     */
    function clearContainer() {
      preContainer.innerHTML = '';
      console.log('容器已清空');
    }

    /**
     * 创建并添加pre标签到容器中（不清空之前的内容）
     * @param {string} content - pre标签的内容
     */
    function addPreTag(content) {
      // 创建pre元素
      const preElement = document.createElement('pre');
      preElement.className = 'dynamic-pre';
      preElement.textContent = content;

      // 添加到容器中
      preContainer.appendChild(preElement);

      // 滚动到最新添加的内容
      preContainer.scrollTop = preContainer.scrollHeight;

      console.log(`已添加pre标签: ${content}`);
    }

    /**
     * 开始无限循环演示
     * 展示完三句话后清空容器，然后开始下一轮循环
     */
    function startInfiniteDemo() {
      // 设置定时器，每隔1秒执行一次
      intervalId = setInterval(() => {
        // 添加当前索引对应的内容
        addPreTag(preContents[currentIndex]);

        // 索引递增
        currentIndex++;

        // 检查是否已经展示完所有内容
        if (currentIndex >= preContents.length) {
          // 重置索引，准备下一轮循环
          currentIndex = 0;

          // 延迟清空容器，让用户看到完整的三句话
          setTimeout(() => {
            clearContainer();
            console.log('一轮循环完成，清空容器准备下一轮');
          }, 1000); // 1秒后清空
        }
      }, 1500); // 1000毫秒 = 1秒

      console.log('无限循环演示开始 - 展示完三句话后清空再循环');
    }

    /**
     * 停止演示函数（保留用于页面卸载时清理）
     */
    function stopDemo() {
      // 清除定时器
      if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
      }
      console.log('演示停止');
    }

    // 页面加载完成后的初始化
    document.addEventListener('DOMContentLoaded', function () {
      console.log('页面加载完成，开始无限循环演示');
      // 页面加载完成后立即开始无限循环
      startInfiniteDemo();
    });

    // 页面卸载时清理定时器
    window.addEventListener('beforeunload', function () {
      if (intervalId) {
        clearInterval(intervalId);
      }
    });
  </script>
</body>

</html>